<!-- 场馆---详情 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		useLongLatStore
	} from '@/stores/index'
	import {
		getShopApi,
		qrySpListApi,
		qryEvalApi
	} from '@/api/venue.js'

	// 经纬度
	const longLatStore = useLongLatStore()

	import DateTabs from '@/uni_modules/hope-11-date-tabs-v3/components/hope-11-date-tabs-v3/hope-11-date-tabs-v3.vue'
	// 全局页面数据
	const data = reactive({
		pageNo: 1, // 当前页码
		pageSize: 3, // 每页数量
		totalPages: 10, // 总页数
		barHeight: 0,
		navHeight: 0,
		swiperCurrent: 0,
		controlIndex: 0,
		controlList: [{
				type: 0,
				txt: '整体环境'
			},
			{
				type: 1,
				txt: '有氧区'
			},
			{
				type: 2,
				txt: '淋浴区'
			}
		],
		typeActive: 1,
		types: [
			// {
			//   type: 0,
			//   txt: '课程预约'
			// },
			{
				type: 1,
				txt: '场地预约'
			}
		],
		value1: '',
		shadowStyle: {
			backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
			paddingTop: "150rpx",
			marginTop: "-130rpx"
		}
	})

	const dictValue = ref()

	const shopId = ref()

	const shopScore = ref()

	onLoad((val) => {

		shopId.value = val.shopId
		shopScore.value = val.shopScore
		console.log('val', val);
		console.log('shopScore.value    --- ', shopScore.value);
		// 场馆详情接口
		getShopList()
		// 查询热门教练推荐
		getSpList()
		// 用户对场地的评价
		getQryEval()
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2


	})


	const shopList = ref({
		addr: '',
		shopMainPic: '',
		shopDesc: '',
		prodList: [],
		shopDetailPic: [],
	})

	const minValue = ref()

	const getShopList = () => {
		getShopApi({
			shopId: shopId.value,
			latitude: longLatStore.info.latitude,
			longitude: longLatStore.info.longitude,
		}).then(res => {
			res.data.shopDetailPic = res.data.shopDetailPic.split(",")
			// 多少小时前有人预约
			let prodBuy = []
			if (res.data.prodList && res.data.prodList.length > 0) {
				res.data.prodList.forEach((item) => {
					if (item.prodBuyDesc !== "") {
						if (item.prodBuyDesc === "刚刚有人下单") {
							return minValue.value = '刚刚有人预约'
						}
						item.prodBuyDesc = item.prodBuyDesc.replaceAll(/[^0-9]/g, "");
						prodBuy.push(Number(item.prodBuyDesc))
					}
				})

			}
			console.log('prodBuy:======================', prodBuy.length);
			if (prodBuy.length === 0 && minValue.value === undefined) {
				minValue.value = '暂无预约'
			}

			if (prodBuy.length !== 0) {
				console.log('ceshi');
				minValue.value = Math.min(...prodBuy)
			}
			console.log('minValue.value: ', minValue.value);

			shopList.value = res.data

			console.log('shopList.value:===1111111', shopList.value);
		})
	}

	const coachList = ref([])



	// 查询热门教练推荐
	const getSpList = () => {
		data.currentCity = uni.getStorageSync('currentCity') || {}
		pageSize: data.pageSize,
			qrySpListApi({
				pageNum: data.pageNo,
				pageSize: data.pageSize,
				latitude: longLatStore.info.latitude,
				longitude: longLatStore.info.longitude,
				cityCode: data.currentCity.code,
				qryType: 2,
				bizType: data.typeCode
			}).then(res => {
				res.data.map((item) => {
					item.tagLabel = item.tagLabel.split("|")
				})

				coachList.value = res.data

			})
	}

	// 返回上一页
	const back = () => {
		uni.navigateBack({
			// success: function(e) {
			// 	console.log('目标页面加载成功,携带参数并触发事件');
			// 	uni.$emit('templateClick', dictValue);
			// }
		})
	}

	// 类型切换
	const typesChange = (type) => {
		data.typeActive = type
	}
	// 选中时间
	const onDateTabsChange = (e) => {
		data.value1 = e
	}

	// 借助u-parse组件的@load(内容多为文字时)或者@ready(内容多为图片时，可能会有较大延时)事件，通过ref 重新初始化
	const load = () => {
		const instance = getCurrentInstance();
		const textElement = instance.refs.textRef.init(); // 使用refs获取DOM元素
		console.log(textElement, 'ceshi');
		console.log(textElement.textContent, 'ceshi'); // 访问DOM属性

	}

	// 用户对场地的评价

	const qryEvalList = ref()

	const getQryEval = () => {
		const userId = uni.getStorageSync('userId')
		qryEvalApi({
			pageNum: 1,
			pageSize: 10,
			userId: userId,
		}).then(res => {
			qryEvalList.value = res.data
			console.log('res:====================111111111111=================== ', res);
		})

	}


	// 前往场地详情
	const goToField = (itemValue) => {
		console.log('itemValue:--------- ', itemValue);
		uni.navigateTo({
			url: `/subPackage/venue/field?shopList=${JSON.stringify(shopList.value)}&itemValue=${JSON.stringify(itemValue)}`
		})
	}
</script>

<template>
	<view class="venue-detail-page">
		<view class="navber" :style="{ 'height': data.navHeight + 'px', 'margin-top': data.barHeight + 'px' }">
			<u-icon class="back" color="#FFFFFF" name="arrow-left" @click="back"></u-icon>
			<text>场馆详情</text>
		</view>
		<!-- 头部 -->
		<view class="head">
			<!-- 轮播 -->
			<swiper class="swiper-box" :current="data.swiperCurrent" circular :autoplay="true" :interval="3000"
				@change="e => data.swiperCurrent = e.detail.current">
				<swiper-item class="item" v-for="(item,index) in shopList.shopDetailPic" :key="index">
					<view>
						<image style="height: 500rpx; width: 750rpx;" :src="item" mode="scaleToFill" />
					</view>
				</swiper-item>
			</swiper>
			<!-- 控制 -->
			<view class="control-box">
				<view class="left">
					<view class="item" v-for="(item, index) in data.controlList" :key="item.type"
						:class="data.controlIndex == index ? 'active' : ''" @click="data.controlIndex = index">
						<text>{{ item.txt }}</text>
					</view>
				</view>
				<view class="right">
					<text class="current">{{ data.swiperCurrent +1 }}</text>
					<text class="num">{{ '/' + shopList.shopDetailPic.length }}</text>
				</view>
			</view>
		</view>

		<view class="" style="background-color: #fff;margin: 0 32rpx;border-radius: 0 0 24rpx 24rpx;">

			<!-- 门店信息 -->
			<view class="shop-box">
				<view class="left">
					<image :src="shopList.shopMainPic" style="width: 148rpx;height: 148rpx;" mode="scaleToFill" />
				</view>
				<view class="right">
					<view class="name">
						<text class="left">{{shopList.shopName}}</text>
						<view class="right">
							<image src="/static/images/coach/icon_address.png" mode="widthFix" />
							<text style="#333333">{{shopList.distanceLabel}}</text>
						</view>
					</view>
					<view class="rate">
						<!-- 	<uni-rate :size="24" :value="shopScore" :max="5" allowHalf readonly color="transparent"
							activeColor="#FFB13B" /> -->

						<up-rate v-model="shopScore" size="12" :allowHalf="true" inactiveIcon="star-fill"
							inactiveColor="#D9D9D9" activeColor="#FFB13B" readonly></up-rate>
						<text>{{ shopScore || '暂无评价' }}</text>
						<text style="font-size: 24rpx; color: #FF7C36; font-weight: Bold;">{{shopList.shopScore}}</text>
						<text style="font-size: 20rpx;margin-left: 14rpx;">{{shopList.viewNum||0}}人消费</text>
						<text style="font-size: 20rpx; color: #44C94A;margin-left: 32rpx;"
							v-if="minValue!=='暂无预约'">{{ typeof minValue === 'number'? `${minValue}小时前` : '刚刚' }}有人预约</text>
						<text style="font-size: 20rpx; color: #44C94A;margin-left: 32rpx;"
							v-if="minValue==='暂无预约'">暂无预约</text>

					</view>
					<view class="tags">
						<text v-for="tag in shopList.tshopTagLabelList" :key="tag" class="card">{{ tag }}</text>
					</view>
				</view>
			</view>
			<!-- 位置信息 -->
			<view class="address-box">
				<view class="address">
					<view>地址：{{shopList.addr}}</view>
					<view style="margin-top:6rpx">营业时间：{{shopList.bizHours}}</view>
				</view>
				<view class="icons">

					<view class="item">
						<image src="/static/images/venue/phone.png" style="width: 48rpx; height: 48rpx;"
							mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
		<!-- 预约信息 -->
		<view class="reservation-box">
			<view class="tabs">
				<view v-for="item in data.types" :key="item.type" class="item"
					:class="item.type == data.typeActive ? 'active' : ''" @click="typesChange(item.type)">
					<text>{{ item.txt }}</text>
				</view>
			</view>
			<DateTabs :value.sync="data.value1" @change='onDateTabsChange'></DateTabs>
			<view v-if="data.typeActive == 0" class="class-list">
				<view v-for="item in 3" :key="item" class="item">
					<view class="left">
						<image v-if="false" src="" mode="aspectFill" />
					</view>
					<view class="right">
						<view class="name">
							<text>减肥塑型训练</text>
						</view>
						<view class="label-list">
							<text>7:00-10:00</text>
							<text>180分钟</text>
							<text>专项训练</text>
						</view>
						<view class="bottom">
							<view class="price">
								<view class="current-price">
									<view class="num">
										<text>￥190</text>
									</view>
									<text>/次</text>
								</view>
								<view class="original-price">
									<text>240/次</text>
								</view>
							</view>
							<view class="btn">
								<text>预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="field-list" v-if="shopList.prodList.length>0">
				<u-read-more :toggle="true" textIndent="0em" :shadowStyle="data.shadowStyle" closeText="展开"
					color="#D9D9D9" ref="textRef">
					<view v-for="(item,index) in shopList.prodList" :key="item.prodId"
						style="border: 1rpx solid #F5F5F5;" @load="load">
						<view class="item">
							<view class="left">
								<image :src="item.prodMainPic" mode="aspectFill"
									style="width: 132rpx; height: 152rpx;" />
							</view>
							<view class="right">
								<view class="name">
									<text>{{item.prodName}}</text>
								</view>
								<view class="label-list">
									<text v-for="item in shopList.tshopTagLabelList" :key="tag">{{item}}</text>
								</view>
								<view class="bottom">
									<view class="price">
										<view class="current-price">
											<view class="num">
												<text>￥{{item.price}}</text>
											</view>
											<text>/次</text>
										</view>
										<view class="original-price">
											<text>{{item.origPrice}}/次</text>
										</view>
									</view>
									<view class="btn" :class="false ? 'disabled' : ''" @click="goToField(item)">
										<text>预约</text>
									</view>
								</view>
							</view>

						</view>
						<view class="" style="color: #666666; font-size: 24rpx;margin-bottom: 18rpx;">
							可约时间段：{{item.saleStartTime}}- {{item.saleEndTime}}
						</view>
					</view>
				</u-read-more>
			</view>
		</view>
		<!-- 次卡 -->
		<view v-if="false && data.typeActive == 1" class="secondary-card-box">
			<view class="title">
				<text>特惠次卡</text>
			</view>
			<view class="card">
				<view class="top">
					<image src="/static/images/coach/secondary_card_icon.png" mode="scaleToFill" />
					<text class="name">健身房单次卡</text>
					<text class="tip">丨不做长期承诺，享受当下的汗水</text>
				</view>
				<view class="bottom">
					<view class="price">
						<view class="num">
							<text>￥29</text>
						</view>
						<text>/次</text>
					</view>
					<view class="btn">
						<text>预约</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 教练推荐 -->
		<view class="coach-box">
			<view class="title">
				<text>教练推荐</text>
			</view>
			<view class="list">

				<view v-for="(item,index) in coachList" :key="item.spId">
					<view class="item">
						<image :src="item.spAvatar" style="width: 168rpx;height: 224rpx;" mode="aspectFill" />
						<view class="right">
							<view style="    margin-left: 30rpx;">
								<text>{{item.spName}}</text>
								<text class="goldMedalCoach" style="">{{item.spLevel ==='1'?'金牌教练' :'银牌教练'}}</text>
							</view>

							<view style="    margin: 18rpx 0 4rpx 18rpx;">

								<view style=" width: 444rpx; display: flex;">
									<view class="guidance" v-for="(it,ind) in item.tagLabel" :key="ind">{{it}}
									</view>

								</view>
								<view class="score">
									<view class="score_view" style="color: #FF9D68;">{{item.score}}</view>
									<view class="score_view"
										style="border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc">
										{{item.serviceTime}}
									</view>
									<view class="score_view" style="">{{item.workYears}}</view>
								</view>
								<view style="    text-align: center; display: flex;">
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">客户评分</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">服务时长</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">从业年限</view>
								</view>
							</view>

							<view class="certDesc">
								<view class="certDesc_view" v-for="(its,idx) in item.certList" :key="its.id">
									{{its.certDesc}}
								</view>
							</view>
						</view>

					</view>
					<view class="spDesc">
						<text style="font-size: 24rpx;">{{item.spDesc}}</text>
						<text style="white-space: nowrap;"><text
								style="color: #3F9742;font-size: 36rpx;    ">{{item.price}}</text>/次</text>
					</view>

				</view>

			</view>
		</view>


		<!-- 评价 -->
		<view class="evaluate-box">
			<view class="top">
				<view class="title">
					<text>用户评价</text>
				</view>
				<view class="more">
					<text>查看全部</text>
					<u-icon name="arrow-right" color="#838385"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in qryEvalList" :key="item.evalId">
					<!-- 头部 -->
					<view class="head-box">
						<up-avatar :src="item.userAvatar"></up-avatar>
						<view class="info">
							<view class="name">
								<text>{{ item.userName }}</text>

								<up-rate v-model="item.score" size="12" :allowHalf="true" inactiveIcon="star-fill"
									inactiveColor="#D9D9D9" activeColor="#FFB13B" readonly></up-rate>

							</view>
							<view class="time">{{ item.createTime }}</view>
						</view>

					</view>
					<!-- 评价文字 -->
					<view class="cnt">
						<text>{{ item.comment }}</text>
					</view>
					<view>
						<!-- 图片列表 -->
						<view class="picList">
							<view v-for="(src, index) in qryEvalList.fileList" :key="index" class="pic-item">
								<u-image :src="src" width="148rpx" height="148rpx" mode="aspectFill" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 场馆介绍 -->
		<view class="introduce-box">
			<view class="title">
				<text>场馆介绍</text>
			</view>
			<view class="" v-if="shopList.shopDesc!=''">
				<u-read-more :toggle="true" textIndent="0em" :shadowStyle="data.shadowStyle" closeText="展开"
					color="#D9D9D9">
					<view class="content">
						<view v-html="shopList.shopDesc" style="#666666;font-size: 28rpx;">
						</view>
					</view>
				</u-read-more>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.venue-detail-page {
		padding-bottom: 216rpx;
		background-color: #F6F6F6;
		min-height: 100vh;

		& .tags {
			display: flex;
			align-items: center;

			& .card {
				padding: 4rpx 12rpx;
				margin-left: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #838385;
				line-height: 21rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				background: #F5F7F6;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		.score {
			margin: 10rpx 0;
			text-align: center;
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			width: 444rpx;

			.score_view {
				width: 33.3%;

			}
		}

		.certDesc {
			display: flex;
			justify-content: space-between;
			width: 444rpx;
			margin-left: 30rpx;

			.certDesc_view {
				width: 140rpx;
				border: 1rpx solid #ccc;
				padding: 5rpx 8rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
			}
		}

		.spDesc {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		// 顶部导航栏
		& .navber {
			position: absolute;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100vw;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: center;

			&::v-deep .u-icon {
				position: absolute;
				left: 24rpx;
				font-size: 40rpx;

			}
		}

		// 头部-轮播
		& .head {
			position: relative;

			& .swiper-box {
				height: 500rpx;
				text-align: center;

				& .item {
					height: 500rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: red;
				}
			}

			& .control-box {
				position: absolute;
				bottom: 24rpx;
				display: flex;
				padding: 32rpx;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				& .left {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 4rpx;
					width: 304rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 200rpx 200rpx 200rpx 200rpx;

					& .item {
						padding: 8rpx 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 23rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;

						&.active {
							font-weight: 500;
							font-size: 20rpx;
							color: #303133;
							background: #FFFFFF;
							border-radius: 90rpx 90rpx 90rpx 90rpx;
						}
					}
				}

				& .right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #8A8C92;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;

					& .current {
						color: #fff;
					}
				}
			}
		}

		// 门店信息
		& .shop-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 18rpx 12rpx 32rpx;

			&>.left {
				width: 148rpx;
				height: 148rpx;
				// border-radius: 50%;
				border: 4rpx solid #fff;
				box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15);
				border-radius: 50%;
				overflow: hidden;
			}

			&>.right {
				// padding-left: 18rpx;
				// width: 526rpx;

				& .name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 4rpx;

					& .left {
						width: 408rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #303133;
						line-height: 38rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					& .right {
						display: flex;
						align-items: center;

						& image {
							width: 25rpx;
							height: 25rpx;
						}

						& text {
							margin-left: 4rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #838385;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}

				& .rate {
					display: flex;
					align-items: center;
					margin-top: 12rpx;

					&::v-deep .uni-rate {
						& .uni-icons {
							font-size: 24rpx !important;
							margin-right: 6rpx;
						}
					}

					& text {
						margin-left: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				& .evaluate {
					margin-top: 14rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #838385;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		// 位置信息
		& .address-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 0 14rpx 24rpx;
			margin: 0 18rpx;
			// margin-top: 30rpx;
			height: 110rpx;
			// background: #F2FFF6;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			// background-image: url('/static/images/coach/address_bg.png');
			background-repeat: no-repeat;
			background-size: cover;

			& .address {
				// width: 392rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #303133;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			& .icons {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// width: 136rpx;

				& .item {
					height: 84rpx;
					text-align: center;

					& view {
						height: 52rpx;

						& image {
							width: 52rpx;
							height: 52rpx;
						}
					}

					& text {
						// margin-top: 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838385;
						line-height: 23rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

		// 预约信息
		& .reservation-box {
			padding: 28rpx 32rpx;
			margin: 0 32rpx;
			margin-top: 20rpx;
			// width: 686rpx;
			// height: 900rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .tabs {
				display: flex;
				align-items: center;
				margin-bottom: 48rpx;

				& .item {
					position: relative;
					margin-right: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #303133;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					&.active {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #303133;
						line-height: 38rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

						// &::after {
						//   content: '';
						//   position: absolute;
						//   left: 0;
						//   right: 0;
						//   bottom: -14rpx;
						//   margin: auto;
						//   height: 10rpx;
						//   width: 96rpx;
						//   border-radius: 6rpx 0rpx 6rpx 0rpx;
						//   background: linear-gradient(45deg, #303133 0%, #01EF0C 100%);
						// }
					}
				}
			}

			// 课程列表
			& .class-list,
			.field-list {
				margin-top: 16rpx;

				& .item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 208rpx;

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 622rpx;
						height: 0rpx;
						// border: 2rpx solid;
						opacity: 0.5;
						border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
					}

					& .left {
						width: 132rpx;
						height: 152rpx;
						background: #D9D9D9;
						// border-radius: 7rpx 7rpx 7rpx 7rpx;
						// box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15);
						border-radius: 8rpx;
						overflow: hidden;
					}

					& .right {
						margin-left: 20rpx;
						width: 490rpx;

						& .name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							line-height: 33rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						& .label-list {
							margin-top: 8rpx;

							& text {
								display: inline-block;
								padding: 4rpx 12rpx;
								margin-right: 10rpx;

								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 18rpx;
								color: #838385;
								line-height: 21rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
								background: #F5F7F6;
								border-radius: 4rpx 4rpx 4rpx 4rpx;

							}
						}

						& .bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;

							& .price {
								display: flex;
								align-items: flex-end;

								& .current-price {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 20rpx;
									color: #838385;
									line-height: 23rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;

									& .num {
										display: inline-block;
										margin-right: 6rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 32rpx;
										line-height: 38rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
										background-clip: text;
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									}
								}

								& .original-price {
									position: relative;
									margin-left: 12rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 20rpx;
									color: #D9D9D9;
									text-align: left;
									font-style: normal;
									text-transform: none;

									& text::after {
										content: "";
										position: absolute;
										z-Index: 2;
										left: 0;
										top: 10rpx;
										width: 100%;
										height: 2rpx;
										background-color: #D9D9D9;
										transform: rotate(-10deg);
									}
								}
							}

							& .btn {
								width: 108rpx;
								height: 50rpx;
								background: linear-gradient(180deg, #21FF2B 0%, #303133 100%);
								border-radius: 183rpx 183rpx 183rpx 183rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 50rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;

								&.disabled {
									background: linear-gradient(180deg, #21FF2B 0%, #303133 100%);
									border-radius: 183rpx 183rpx 183rpx 183rpx;
									opacity: 0.3;
								}
							}
						}
					}
				}
			}
		}
	}

	// 次卡
	.secondary-card-box {
		margin: 0 32rpx;
		margin-top: 20rpx;
		padding: 32rpx;
		width: 686rpx;
		height: 284rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		& .title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #303133;
			line-height: 38rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		& .card {
			padding: 24rpx 48rpx;
			margin-top: 24rpx;
			width: 624rpx;
			height: 162rpx;
			background-image: url('/static/images/coach/secondary_card_bg.png');

			& .top {
				display: flex;
				align-items: center;

				& image {
					width: 32rpx;
					height: 24rpx;
				}

				& .name {
					margin-left: 12rpx;
					margin-right: 2rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #303133;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				& .tip {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #838385;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			& .bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;

				& .price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #838385;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					& .num {
						display: inline-block;
						margin-right: 6rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						line-height: 38rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				& .btn {
					width: 108rpx;
					height: 50rpx;
					background: linear-gradient(180deg, #21FF2B 0%, #303133 100%);
					border-radius: 183rpx 183rpx 183rpx 183rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}

	}

	// 教练推荐
	.coach-box {
		margin: 0 32rpx;
		margin-top: 20rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		& .title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #303133;
			line-height: 38rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		& .list {
			& .item {
				display: flex;
				// align-items: center;
				// justify-content: space-between;
				margin-top: 24rpx;
				// height: 218rpx;
				background: #FFFFFF;

				& .left {
					width: 168rpx;
					height: 224rpx;
				}

				& .right {

					.goldMedalCoach {
						margin-left: 10rpx;
						font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 28rpx;
						text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
						text-align: center;
						font-style: normal;
						text-transform: none;
						padding: 6rpx 10rpx 6rpx 10rpx;
						background: linear-gradient(121deg, #30BD25 0%, #6BE861 100%);
						border-radius: 0rpx 12rpx 12rpx 12rpx;

					}

					.guidance {

						margin-left: 11rpx;
						white-space: nowrap;
						background-color: #ccc;
						padding: 4rpx 12rpx !important;
						border-radius: 20rpx;
						font-size: 20rpx;
						// width: fit-content !important;
						width: 138rpx !important;
						text-align: center;

					}

				}
			}
		}

		// 配套设施列表
		.facilities-list {
			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 28rpx 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			& .list {
				margin-top: 20rpx;

				& .item {
					display: inline-block;
					margin-right: 40rpx;
					width: 76rpx;

					& image {
						width: 76rpx;
						height: 76rpx;
					}

					& text {
						margin-top: 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						opacity: 0.3;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

	}



	// 评价
	.evaluate-box {
		margin: 20rpx 32rpx 0;
		padding: 28rpx 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		& .top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			& .title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
			}

			& .more {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #838385;

				& text {
					margin-right: 4rpx;
				}
			}
		}

		& .list {
			margin-top: 32rpx;

			& .item {
				padding-top: 24rpx;

				&:first-child {
					padding-top: 0rpx;
				}

				&:not(:last-child):after {
					margin-top: 24rpx;
					content: '';
					display: block;
					border: 2rpx solid;
					opacity: 0.5;
					border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
				}

				& .head-box {
					display: flex;
					align-items: center;

					& .info {
						// margin-left: 12rpx;

						& .name {
							display: flex;
							align-items: center;

							& text {
								margin-right: 14rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;
							}
						}

						& .time {
							margin-top: 6rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}
				}

				& .cnt {
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #303133;
				}

				& .picList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 16rpx;

					& .pic-item {
						border-radius: 8rpx;
						overflow: hidden;
					}
				}
			}
		}
	}

	// 场馆介绍
	.introduce-box {
		margin: 0 32rpx !important;
		margin-top: 20rpx !important;
		padding: 28rpx 32rpx !important;
		background: #FFFFFF !important;
		border-radius: 24rpx 24rpx 24rpx 24rpx !important;

		& .title {

			margin-bottom: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #303133;
			line-height: 38rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		& .content {
			text-indent: 0em;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #838385;
			line-height: 33rpx;
			text-align: left;
		}
	}
</style>